import { Component } from "react";
import { Swiper, Toast } from "antd-mobile";
import "./style/index.css";
export default class Index extends Component {
  hanldeClickItem = (index) => {
    console.log("🚀 ~ Index ~ index:", index);
    Toast.show(`点击了第${index}个`);
  };
  items = () => {
    const colors = ["#ace0ff", "#bcffbd", "#e4fabd", "#ffcfac"];
    return colors.map((color, index) => (
      <Swiper.Item key={index}>
        <div
          className="content"
          style={{ background: color }}
          onClick={() => this.hanldeClickItem(index + 1)}
        >
          {index + 1}
        </div>
      </Swiper.Item>
    ));
  };

  render() {
    return (
      <div className="container-index">
        <Swiper autoplay loop>{this.items()}</Swiper>
      </div>
    );
  }
}
